<template>
  <div class="main">
    <el-drawer class="el-drawer" v-model="drawer" direction="ltr" :with-header="false" :size="380">
      <div>
        <div class="input">
          <el-input
            :prefix-icon="Search"
            class="el-input"
            v-model="carNo"
            placeholder="请输入车牌号"
            clearable
            @input="getAmbulanceListData"
          />
        </div>
        <el-scrollbar ref="scrollbarRef" always class="f1">
          <div
            v-for="(item, index) in ambulanceData"
            :key="index"
            class="flex-x-start barItem fs-14 mb-15"
            @click="chooseAmbulance(item)"
          >
            <img
              src="../../../../assets/images/rescue/ambulance.png"
              style="width: 58px; height: 32px; transform: rotateY(180deg)"
            />
            <div class="ml-10">
              <div>{{ item.carNo }}</div>
              <div>任务次数：{{ item.count }}</div>
              <div>联系方式：{{ item.telephone }}</div>
            </div>
            <div class="status">
              <img v-if="item.status == 0" src="./status0.png" class="" alt="" />
              <img v-else src="./status1.png" class="" alt="" />
              <span>{{ item.status == 1 ? "行驶" : "待命" }}</span>
            </div>
          </div>
        </el-scrollbar>
        <img class="drawer-btn1 ab" src="./icon7.png" alt="" srcset="" @click="drawer = false" />
      </div>
    </el-drawer>
    <img @click="drawer = true" class="drawer-btn" src="./icon7.png" alt="" srcset="" />
  </div>
</template>
<script setup lang="ts" name="IndexBar">
import { ref, onMounted } from "vue";
import { Search } from "@element-plus/icons-vue";
import { ambulanceList } from "@/api/modules/rescue";
import { useUserStore } from "@/stores/modules/user";
let drawer = ref(false);
//实例化仓库
const userStore = useUserStore();
const $emits = defineEmits(["update"]);

let carNo = ref("");

const ambulanceData = ref();

//获取患者数据
const getAmbulanceListData = async () => {
  let {
    data: { list }
  } = await ambulanceList({ carNo: carNo.value, pageNum: 1, pageSize: 10 });
  userStore.setSelectAmbulance(list[0]);
  ambulanceData.value = list;
};

const chooseAmbulance = (item: any) => {
  userStore.setSelectAmbulance(item);
  drawer.value = false;
  $emits("update", item);
};

onMounted(() => {
  getAmbulanceListData();
});
</script>
<style scoped lang="scss">
.main :deep(.el-drawer) {
  background-color: #04234c;
}
.drawer-btn {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 30px;
  height: 118px;
  cursor: pointer;
}
.drawer-btn1 {
  top: 460px;
  right: 0;
  cursor: pointer;
  transform: rotate(180deg);
}
.input {
  box-sizing: border-box;
  padding: 40px 23px 23px 32px;
  &:deep(.el-input__wrapper) {
    width: 312.87px;
    height: 40px;
    color: #ffffff;
    background: #132e53;
    border-radius: 4px;
    box-shadow: none;
    opacity: 1;
  }
  &:deep(.el-input) {
    font-size: 16px;

    --el-input-text-color: #ffffff;
  }
}

.barItem {
  position: relative;
  width: 100%;
  height: 88px;
  padding: 0 10px;
  box-sizing: border-box;
  border: 1px solid #047eb5;
  // background: linear-gradient(0deg, #024fcc 0%, rgba(25, 82, 175, 0) 100%);
  color: #ffffff;
  cursor: pointer;
  .status {
    position: absolute;
    top: 0;
    right: 0;
    width: 65px;
    height: 44px;
    img {
      width: 100%;
      height: 100%;
    }
    span {
      position: absolute;
      top: 5px;
      right: 3px;
      font-size: 14px;
      color: #fefffe;
    }
  }
}
</style>
